<template>
  <div class="approve-column">
    <div
      v-for="(node, index) in nodes"
      :key="index"
      class="approve-column-node"
      :style="node.style"
    >
      {{ node.operate_admin_name }}
    </div>
  </div>
</template>
<script>
/**
 * @vue
 * @props
 * @prop {Object} config 审批节点的数据格式
 */
export default {
  name: 'ApproveColumn',
  props: {
    config: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    nodes() {
      return this.config.map(item => {
        let style = ''
        switch (item.approval_status) {
          case 1: {
            style = 'color:#409EFF'
            break
          }
          case 2: {
            style = 'color:#67C23A'
            break
          }
          case 3: {
            style = 'color:#F56C6C'
            break
          }
          case 4:
          case 5:
          default: {
            style = 'color:#909399'
          }
        }

        return {
          ...item,
          style: style
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.approve-column {
  display: flex;
  flex-wrap: wrap;
  .approve-column-node {
    margin-right: 5px;
  }
}
</style>
